<template>
	<div class="select-account-wrap">
		<div class="select-account" @click="selectAccount">
			<el-tag
				v-for="(item,index) in selectes"
				:key="item.id"
				type="primary"
				effect="dark"
				size="mini"
			> {{item.pname}} </el-tag>
		</div>
		
		<el-dialog title="选择账号" :visible.sync="dialogVisible">

			<div class="dialog-content">
				
				<el-tree
					:data="accountList"
					ref="accountTree"
					show-checkbox
				    node-key="id"
				    default-expand-all
				    :expand-on-click-node="false"
				>
					<span class="account-item" slot-scope="{ node,data }">
						<span class="account-logo">
							<img :src="require('@/assets/dingNiu/platform-logo/'+data.platformCode+'.png')">
						</span>
						<span class="account-name">{{ data.pname }}</span>
					</span>
				</el-tree>

			</div>

			<div slot="footer" class="dialog-footer">
    			<el-button size="mini" @click="cancel">取 消</el-button>
    			<el-button size="mini" type="primary" @click="confirm">确 定</el-button>
  			</div>
		</el-dialog>
	</div>
</template>

<script>
import { bindList } from "@/api/account/list"
export default{
	data(){
		return{
			dialogVisible:false,
			accountList:[],
			selectes:[]
		}
	},
	methods:{
		//获取绑定账号列表
      	getBindList(){
        	return bindList(null)
      	},
      	selectAccount(){
      		this.getBindList().then((res)=>{
          		console.log("---------获取绑定的账号---------")
          		console.log(res)
          		this.accountList = res.data.data;
          		this.dialogVisible = true;
          		this.$nextTick(()=>{
          			this.$refs.accountTree.setCheckedNodes(this.selectes)
          		})
          		
        	})
      	},
      	cancel(){
      		this.selectes = [];
      		this.selectIds = [];
      		this.dialogVisible = false;

      		this.$emit('cancel',this.selectIds)
      	},
      	confirm(){
      		var selectes = this.$refs.accountTree.getCheckedNodes();
      		var selectIds = this.$refs.accountTree.getCheckedKeys();
      		this.selectes = selectes;
      		this.selectIds = selectIds;
      		
      		if(this.selectIds.length == 0){
      			this.$ipcTips.warning('请选择发布账号')
      			return false;
      		}

      		this.$emit('confirm',this.selectIds)

      		this.dialogVisible = false;
      	}
	}
}

</script>

<style scoped>
.select-account{
	width: 200px;
	-webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}

.account-logo>img{
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.account-name{
	font-size: 13px;
	color: #666;
}

</style>